<template>
  <div
    :class="[isAnimate ? 'animate1' : '', 'bubble_con']"
    :style="{ top: top * 100 + '%' }"
  >
    <img :src="bubble" alt="" :class="['bubble_img']" />
    <div class="bubble_content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { bubble } from "@/constant";
export default {
  data: function() {
    return {
      bubble
    };
  },
  props: {
    top: {
      default: 0,
      type: Number
    },
    isAnimate: {
      default: false,
      type: Boolean
    }
  }
};
</script>

<style lang="scss" scoped>
.bubble_con {
  position: absolute;
  left: 100%;
  width: 371px;

  .bubble_img {
    width: 100%;
  }

  @keyframes danmu {
    0% {
      transform: translate(0, 0);
    }

    100% {
      left: -120%;
    }
  }

  .bubble_content {
    position: absolute;
    left: 0;
    top: 2px;
  }
}

.animate1 {
  // left: 20%;
  animation: danmu 12s forwards linear;
}
</style>
